<template>
  <el-form :inline="true" label-position="right" size="small" label-width="120px" class="filter-form-inline">
    <el-row :gutter="40" style="margin-left: 0px;margin-right:0px;">
      <el-col :span="8">
        <el-form-item label="流程编号：" style="width: 100%;">
          {{ detailData.processNo }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间：" style="width: 100%;">
          {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人：" style="width: 100%;">
          {{ detailData.initiator }}
        </el-form-item>
      </el-col>

      <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
        <item-title title="基本信息" />
      </el-col>

      <el-col :span="24">
        <el-form-item label="产品信息：">
          {{ getProductName(detailData?.data) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="代理名称：" style="width: 100%;">
          {{ detailData?.data?.agentName }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="代理地区：" style="width: 100%;">
          <area-list-view :areas="detailData?.data?.region" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="可营销终端：" style="width: 100%;">
          {{ getLabel('app_mode', detailData?.data?.terminalType) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="负责营销职员：" style="width: 100%;">
          {{ detailData?.data?.headName }}
        </el-form-item>
      </el-col>

      <template v-if="detailData?.data?.terminals && detailData?.data?.terminals.length > 0">
        <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
          <item-title title="配送终端列表" />
        </el-col>

        <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
          <el-table border header-cell-class-name="table-header" :data="detailData?.data?.terminals">

            <el-table-column header-align="center" label="终端名称" prop="terminalName" />

            <el-table-column align="center" label="终端类型">
              <template #default="scope">
                {{ getLabel('app_mode',scope.row.terminalType) }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="所在地区">
              <template #default="scope">
                {{ scope.row.provinceName }}{{ scope.row.cityName }}{{ scope.row.areaName }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="终端价(元)" prop="terminalPrice" />

            <el-table-column header-align="center" label="设置配送信息">
              <template #default="scope">
                <distributors-view v-if="scope.row.distributes && scope.row.distributes.length"
                  :datas="scope.row.distributes" :unit="detailData?.data?.sellUnit" :boole="false" :booleState="false"
                   :booleType="false" />
              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script>
import { reactive, toRefs, watch } from "vue";

export default {
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          data: {},
        };
      },
    },
  },
  setup(props, context) {
    const data = reactive({
      detailData: {},
    });

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          data.detailData = newval;
          console.log(newval);
        }
      },
      { immediate: true, deep: true }
    );

    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="scss" scoped>
</style>